<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="struts"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to IMessager</title>

<link type="text/css" href="./bootstrap/css/bootstrap.css"
	rel="stylesheet" />
<link type="text/css" href="./bootstrap/css/bootstrap-responsive.css"
	rel="stylesheet" />
<script type="text/javascript" src="./bootstrap/js/bootstrap.js"></script>
<link type="text/css"
	href="./jquery-ui-1.8.18.custom/css/flick/jquery-ui-1.8.18.custom.css"
	rel="stylesheet" />
<link type="text/css" href="./css/friend.css" rel="stylesheet"></link>

<script type="text/javascript" src="./js/jquery-1.7.1.js"></script>
<script type="text/javascript"
	src="./bootstrap/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript"
	src="./jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="./js/friend.js"></script>
<script src="./bootstrap/js/bootstrap-dropdown.js"></script>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
	<div id="bg_wrapper">
		<img src="./image/blue_glow.jpg" />
	</div>
	<div class="navbar">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> </a> <img
					class="brand" src="./image/logo.png" />
				<div class="nav-collapse">
					<ul class="nav">
						<li class="active"><a href="listfriend">Home</a></li>
					</ul>
					<ul class="nav pull-right">
						<li class="divider-vertical">s</li>
						<li class="dropdown"><a class="dropdown-toggle"
							data-toggle="dropdown"> <img id="avatar"
								class="myAvatar-small" height="20" src="${session.avatar}" />&nbsp;&nbsp;&nbsp;${session.userName}<b
								class="caret"></b> </a>
							<ul class="dropdown-menu">
								<li><a id="editProfileLink">编辑个人资料</a></li>
								<li><a id="changePasswordLink">修改密码</a></li>
								<li><a href="logout">注销</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<!-- /.nav-collapse -->
			</div>
		</div>
		<!-- /navbar-inner -->
	</div>
	<div>
		<p id="chatting_user"></p>
	</div>

	<div class="row">
		<div id="panel" class="span3 offset8">
			<div>
				<div id="panel-top">
					<!--彪提档	 -->
					<div>
						<p id="panel_header">iMessage</p>
					</div>
					<!--头像，昵称等，可以有个性签名 -->
					<div id="panel_user_area">
						<img class="myAvatar" src="${session.avatar}" title="修改资料">
						<div id="statue">
							<img id="statue-icon" src="./image/statue-online.png"></img><a
								id="statue-user-name" id="user-name"> ${session.userName} </a>
						</div>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;${entity.statue}</p>
					</div>
					<!--功能按钮 -->
					<div id="panel-func-btn">
						<a href="#" id="add_friend_link"
							class="ui-state-default ui-corner-all">添加好友</a> <a href="#"
							id="add_group_link" class="ui-state-default ui-corner-all">增加好友分组</a>
					</div>
					<!-- 搜索域 -->
					<div id="search-friend-area" class="form-inline">
						<input id="search-friend-auto-complete" type="text" class="span3"
							placeholder="搜索好友..." data-provide="typeahead"
							data-source='${dataAutoComplete}' />
					</div>
					<div></div>
				</div>
				<div id="panel-friend-list-constrain">
					<div id="accordion">
						<!--好友分组 -->
						<struts:iterator value="entity.groups">
							<div class="group-entity">
								<h3>
									<a href="#"><span class="groupId" style="display: none">${id}</span>
										<struts:property value="groupName" />[${contentUsers.size()}]
									</a>
								</h3>
								<div style="padding: 0px; overflow: hidden;">
									<table class="table table-striped"
										style="width: 295px; margin-bottom: 0px;">
										<tbody>
											<struts:iterator value="contentUsers">
												<tr>
													<td class="friend-line"><a class="uid"
														style="display: none">${id}</a><img id="user_avatar_${id}"
														class="friend-avatar myAvatar-small" src="${avatarPath}" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														<a class="uName">${userName}</a>(${statue})
													</td>
												</tr>
											</struts:iterator>
										</tbody>
									</table>
								</div>
							</div>
						</struts:iterator>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div align="center"></div>
	<div id="dialog-area">
		<!-- 	添加好友对话框 -->
		<div id="add_friend_dialog" title="添加好友" class="well">
			<div id="add-friend-success-info" class="alert alert-success"
				style="display: none">
				<strong>添加好友成功！</strong>你可以刷新页面看到。
			</div>
			<div id="add-friend-failed-info" class="alert alert-error"
				style="display: none">
				<strong>添加好友失败！</strong>请检查输入。
			</div>
			<div class="row">
				<div class="span5">
					<form id="addfriendForm" method="post" action="addfriend"
						class="form-horizontal well">
						<fieldset>
							<legend>请输入添加的好友名称</legend>
							<div class="control-group">
								<label class="control-label" for="friendName">好友昵称：</label>
								<div class="controls">
									<div class="input-prepend">
										<span class="add-on"><i class="icon-user"></i> </span><input
											type="text" class="input-medium" id="friendName" type="text"
											name="friendName" autofocus required placeholder="好友昵称">
									</div>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="nickName">备注名（可不填）：</label>
								<div class="controls">
									<div class="input-prepend">
										<span class="add-on"><i class="icon-user"></i> </span><input
											type="text" class="input-medium" id="nickName" type="text"
											name="nickName" autofocus placeholder="好友昵称">
									</div>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="groupId">好友分组 ：</label>
								<div class="controls">
									<div class="input-prepend">
										<span class="add-on"><i class="icon-th-list"></i> </span>
										<struts:select cssClass="input-medium" list="entity.groups"
											id="groupId" name="groupId" listKey="id"
											listValue="groupName" headerKey="0"></struts:select>
									</div>
								</div>
							</div>
							<div class="form-actions">
								&nbsp; &nbsp;&nbsp;
								<button type="submit" class="btn btn-primary">
									<i class="icon-ok-sign icon-white"></i>添加
								</button>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
		</div>

		<!-- 	添加好友分组对话框 -->
		<div id="add_group_dialog" title="添加分组">
			<div id="add-group-success-info" class="alert alert-success"
				style="display: none">
				<strong>添加分组成功！</strong>你可以刷新页面看到。
			</div>
			<div id="add-group-failed-info" class="alert alert-error"
				style="display: none">
				<strong>添加分组失败！</strong>请检查输入。
			</div>
			<div>
				<form id="addGroupForm" method="post" action="addgroup"
					class="form-inline well">
					<fieldset>
						<legend>请输入分组名称</legend>
						<div class="control-group">
							<label class="control-label" for="groupName">分组名称：</label><input
								type="text" class="input-medium" id="groupName" type="text"
								name="groupName" autofocus required placeholder="好友昵称">
							<button type="submit" class="btn btn-primary">
								<i class="icon-ok-sign icon-white"></i>添加
							</button>
						</div>
					</fieldset>
				</form>
			</div>
		</div>

		<!-- 		查看用户信息 -->
		<div id="view-user-info-dialog">
			<div>
				<form id="saveFriendInfoForm" method="post" action="saveFriendInfo"
					class="form-horizontal well">
					<input id="viewUserId" type="hidden" name="viewUserId"> <input
						id="originalGroupId" type="hidden" name="originalGroupId">

					<fieldset>
						<legend>
							<span>查看好友信息</span><img id="viewUserAvatar" class="myAvatar"></img>
						</legend>
						<div class="control-group">
							<label class="control-label" for="viewFriendName">好友昵称：</label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-user"></i> </span><input
										type="text" class="input-medium" id="viewFriendName"
										type="text" name="viewFriendName" readonly="readonly">
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="viewNickName">备注名（可不填）：</label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-user"></i> </span><input
										type="text" class="input-medium" id="viewNickName" type="text"
										name="viewNickName">
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="viewGroupId">好友分组 ：</label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-th-list"></i> </span>
									<struts:select cssClass="input-medium" list="entity.groups"
										id="viewGroupId" name="viewGroupId" listKey="id"
										listValue="groupName"></struts:select>
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="view_email">Email：</label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-envelope"></i> </span><input
										type="text" class="input-medium" id="viewEmail" type="text"
										name="viewEmail" autofocus readonly="readonly">
								</div>
							</div>
						</div>
						<div class="form-actions">
							<a id="delFriendship" class="btn btn-warning"> <i
								class="icon-trash icon-white"></i>解除关系 </a> &nbsp; &nbsp;&nbsp; <a
								id="view-user-close" class="btn btn-info"> <i
								class="icon-remove icon-white"></i>关闭窗口 </a> &nbsp; &nbsp;&nbsp;
							<button type="submit" class="btn btn-primary">
								<i class="icon-ok-sign icon-white"></i>保存更新
							</button>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
		<!-- 		编辑个人信息 -->
		<div id="edit-profile-dialog">
			<div>
				<form id="saveProfileForm" method="post" action="saveProfile"
					class="form-horizontal well">
					<fieldset>
						<legend>
							<span>编辑个人信息</span><img id="viewUserAvatar" class="myAvatar"
								src="${session.avatar}"></img>
						</legend>
						<div class="control-group">
							<label class="control-label" for="userName">昵称：</label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-user"></i> </span><input
										type="text" class="input-medium" id="userName" type="text"
										name="userName" readonly="readonly"
										value="${session.userName}">
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="viewGroupId">头像：</label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-file"></i> </span><input
										type="file" class="input-medium" id="newAvatar" name="avatar">
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="userEmail">Email：</label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-envelope"></i> </span><input
										type="email" class="input-medium" id="userEmail"
										readonly="readonly" name="email" value="${entity.email}">
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="userStatue">个性签名：</label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-pencil"></i> </span><input
										type="text" class="input-medium" id="userStatue" name="statue">
								</div>
							</div>
						</div>
						<div class="form-actions">
							<a id="edit-profile-close" class="btn btn-info"> <i
								class="icon-remove icon-white"></i>关闭窗口 </a> &nbsp; &nbsp;&nbsp;
							<button type="submit" class="btn btn-primary">
								<i class="icon-ok-sign icon-white"></i>保存更新
							</button>
						</div>
					</fieldset>
				</form>
			</div>
		</div>

		<!-- 		更改密码 -->
		<div id="change-pasword-dialog">
			<div>
				<form id="savePasswordForm" method="post" action="changePassword"
					class="form-horizontal well">
					<fieldset>
						<legend>
							<span>更改密码</span>
						</legend>
						<div class="control-group">
							<label class="control-label" for="oldPassword">原密码：</label>
							<div class="controls">
								<div class="input-prepend">
									<input type="password" class="input-medium" id="oldPassword"
										name="oldPassword">
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="newPassword">新密码：</label>
							<div class="controls">
								<div class="input-prepend">
									<input type="password" class="input-medium" id="newPassword"
										name="newPassword">
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="confirmPassword">确认密码：</label>
							<div class="controls">
								<div class="input-prepend">
									<input type="password" class="input-medium"
										id="confirmPassword" name="confirmPassword">
								</div>
							</div>
						</div>
						<div class="form-actions">
							<a id="change-password-close" class="btn btn-info"> <i
								class="icon-remove icon-white"></i>关闭窗口 </a> &nbsp; &nbsp;&nbsp;
							<button type="submit" class="btn btn-primary">
								<i class="icon-ok-sign icon-white"></i>保存更新
							</button>
						</div>
					</fieldset>
				</form>
			</div>
		</div>

		<div id="upload-file-dialog" title="传送文件">
			<form id="uploadFileForm" method="post" action="uploadFile"
				class="form-inline well">
				<input type="hidden" id="uploadUserId" name="userId"> 请选择文件：<input
					type="file" name="file"></input> <input type="submit"
					class="btn btn-primary" value="上传">
			</form>
			<div class="percent">0%</div>
			<div id="upload-progress" class="progress progress-striped active">
				<div class="bar" style="width: 0%;"></div>
			</div>
			<div id="upload-file-success-info" class="alert alert-success"
				style="display: none">
				<strong>上传文件成功！</strong>
			</div>
			<div id="upload-file-failed-info" class="alert alert-error"
				style="display: none">
				<strong>上传文件失败！</strong>
			</div>
		</div>
		<div id="info-area-dialog">
			<div>
				<div id="add-success-info" class="alert alert-success"
					style="display: none; margin-top: 15px;"></div>
				<div id="add-failed-info" class="alert alert-error"
					style="display: none;margin-top: 15px;"></div>
				<div>
					<a id="info-area-close" class="btn btn-primary pull-right">关闭</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
